<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery-hy_slide多功能滚动插件v1.0</title>
<link type="text/css" href="Css/base.css" rel="stylesheet" />
<link type="text/css" href="Css/jquery-hy_slide.css" rel="stylesheet" />
<script type="text/javascript" src="Js/jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="Js/jquery-hy_slide.js"></script>
</head>
<body>
<div id="page">
    <table class="hyBox w800">
        <tr>
            <th colspan="3" class="f-14 f-red  fb tc h30">Jquery-hy_slide多功能滚动插件 v1.0 参数说明</th>
        </tr>
        <tr>
            <th width="155" scope="row">参数名</th>
            <td width="438">参数值(默认值可以省略)</td>
            <td width="166">特别说明</td>
        </tr>
        <tr>
            <th rowspan="5" scope="row">effect </th>
            <td>scrollY (默认)：垂直回转式滚动</td>
            <td rowspan="5">回转式滚动是指移动到末尾处后反方向滚动回到开始处，循环式滚动则是指移动到末尾处后保持方面不变回到开始处</td>
        </tr>
        <tr>
            <td>scrollLoopY：垂直循环式滚动</td>
        </tr>
        <tr>
            <td>scrollX：水平回转式滚动</td>
        </tr>
        <tr>
            <td>scrollLoopX：水平循环式滚动</td>
        </tr>
        <tr>
            <td>fade：渐变式切换</td>
        </tr>
        <tr>
        <th scope="row">autoPlay</th>
            <td>true (默认) , false：是否自动执行</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">corotation</th>
            <td>true (默认) , false：是否正转</td>
            <td>由下到上、由右到到左为正转</td>
        </tr>
        <tr>
            <th scope="row">speed</th>
            <td>fast, normal (默认), slow, 正整数：动画执行速度</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">timer</th>
            <td>fast, normal (默认), slow, 正整数：动画执行间隔</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">show</th>
            <td>正整数：一屏里展示的信息数量，默认展示1个，该参数对fade无效</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">step</th>
            <td>正整数：每次动画移动的信息数量，默认移动1个，该参数对fade无效</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">classTr</th>
            <td>jQuery类选择器，默认为"hySlideTrigger"：触发器父级class</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">classCon</th>
            <td>jQuery类选择器，默认为"hySlideContent"：滚动器父级class</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">btnPrev</th>
            <td>jQuery类选择器，默认为"prev"：上一个按钮class</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">btnNext</th>
            <td>jQuery类选择器，默认为"next"：下一个按钮class</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">loop</th>
            <td>true (默认) , false：是否循环执行动画</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">slight</th>
            <td>正整数，默认为0：项目微调，单位px</td>
            <td>对滚动器宽高进行细微调整</td>
        </tr>
    </table>

	<!-- 效果演示1 -->
    <script type="text/javascript">
	$(function(){
		$('#demo1').hy_slide({
			effect : 'scrollY',  //动画执行效果，可以是：scrollY(默认), scrollX, fade, scrollLoopX, scrollLoopY
			autoPlay : true,  //自动执行，true(默认) 或 false
			corotation : true,  //正转或反转，由下到上、由右到到左为正转
			speed : 1000,  //动画速度，可以是：normal(默认), fast, slow 或 数值
			timer : 3000,  //执行间隔，默认1000毫秒
			show : 3,  //展现量，默认展示1个
			step : 2,  //执行步数，默认执行1步
			classTr : 'hySlideTrigger',  //触发器父级class
			classCon : 'hySlideContent',  //滚动器父级class
			btnPrev : 'prev',  //上一个按钮class
			btnNext : 'next',  //下一个按钮class
			loop : true,  //是否循环执行动画，默认true
			slight : 6 //项目微调，单位px
		});
	});
	</script>
	<div class="demoBox1 mt20 fl">
    <!-- 效果演示 start -->
    	<h3>效果演示1 - 垂直回转式滚动</h3>
        <div class="demo1 mt10" id="demo1">
        <!-- demo start -->
            <div class="mainBox pr z10">
                <div class="content pr z10">
                    <ul class="pr z20 hySlideContent">
                        <li><a href="#" title="" target="_blank"><img src="Images/1.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/2.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/3.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/4.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/5.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/6.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/7.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/8.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="trigger pa z30 hySlideTrigger">
                    <ul>
                        <li class="selected">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ul>
                </div>
            </div>
            <div class="hySlideTrigger"><span class="prev cp">上一页</span>&nbsp;<span class="next cp">下一页</span></div>
        <!-- demo end -->
        </div>
<h3>动画代码：</h3>
<pre>
$('#demo1').hy_slide({
    effect : 'scrollY',
    autoPlay : true,
    corotation : true,
    speed : 1000,
    timer : 3000,
    show : 3,
    step : 2,
    classTr : 'hySlideTrigger',
    classCon : 'hySlideContent',
    btnPrev : 'prev',
    btnNext : 'next',
    loop : true,
    slight : 6
});
</pre>
    <!-- 效果演示 end -->
    </div>

	<!-- 效果演示2 -->
    <script type="text/javascript">
	$(function(){
		$('#demo2').hy_slide({
			effect : 'scrollLoopY',  //动画执行效果，可以是：scrollY(默认), scrollX, fade, scrollLoopX, scrollLoopY
			autoPlay : true,  //自动执行，true(默认) 或 false
			corotation : false,  //正转或反转，由下到上、由右到到左为正转
			speed : 1000,  //动画速度，可以是：normal(默认), fast, slow 或 数值
			timer : 3000,  //执行间隔，默认1000毫秒
			show : 3,  //展现量，默认展示1个
			step : 2,  //执行步数，默认执行1步
			classTr : 'hySlideTrigger',  //触发器父级class
			classCon : 'hySlideContent',  //滚动器父级class
			btnPrev : 'prev',  //上一个按钮class
			btnNext : 'next',  //下一个按钮class
			loop : true,  //是否循环执行动画，默认true
			slight : 6 //项目微调，单位px
		});
	});
	</script>
	<div class="demoBox1 mt20 fl">
    <!-- 效果演示 start -->
    	<h3>效果演示2 - 垂直循环式滚动</h3>
        <div class="demo1 mt10" id="demo2">
        <!-- demo start -->
            <div class="mainBox pr z10">
                <div class="content">
                    <ul class="pr z20 hySlideContent">
                        <li><a href="#" title="" target="_blank"><img src="Images/1.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/2.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/3.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/4.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/5.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/6.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/7.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/8.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="trigger pa z30 hySlideTrigger">
                    <ul>
                        <li class="selected">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ul>
                </div>
            </div>
            <div class="hySlideTrigger"><span class="prev cp">上一页</span>&nbsp;<span class="next cp">下一页</span></div>
        <!-- demo end -->
        </div>
<h3>动画代码：</h3>
<pre>
$('#demo2').hy_slide({
    effect : 'scrollLoopY',
    autoPlay : true,
    corotation : false,
    speed : 1000,
    timer : 3000,
    show : 3,
    step : 2,
    classTr : 'hySlideTrigger',
    classCon : 'hySlideContent',
    btnPrev : 'prev',
    btnNext : 'next',
    loop : true,
    slight : 6
});
</pre>
    <!-- 效果演示 end -->
    </div>
    <div class="cb"></div>

	<!-- 效果演示3 -->
    <script type="text/javascript">
	$(function(){
		$('#demo3').hy_slide({
			effect : 'scrollX',  //动画执行效果，可以是：scrollY(默认), scrollX, fade, scrollLoopX, scrollLoopY
			autoPlay : true,  //自动执行，true(默认) 或 false
			corotation : true,  //正转或反转，由下到上、由右到到左为正转
			speed : 1000,  //动画速度，可以是：normal(默认), fast, slow 或 数值
			timer : 3000,  //执行间隔，默认1000毫秒
			show : 3,  //展现量，默认展示1个
			step : 2,  //执行步数，默认执行1步
			classTr : 'hySlideTrigger',  //触发器父级class
			classCon : 'hySlideContent',  //滚动器父级class
			btnPrev : 'prev',  //上一个按钮class
			btnNext : 'next',  //下一个按钮class
			loop : true,  //是否循环执行动画，默认true
			slight : 6 //项目微调，单位px
		});
	});
	</script>
	<div class="demoBox2 mt20">
    <!-- 效果演示 start -->
    	<h3>效果演示3 - 水平回转式滚动</h3>
        <div class="demo2 mt10" id="demo3">
        <!-- demo start -->
            <div class="mainBox pr z10">
                <div class="content">
                    <ul class="pr z20 hySlideContent">
                        <li><a href="#" title="" target="_blank"><img src="Images/1.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/2.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/3.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/4.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/5.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/6.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/7.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/8.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="trigger pa z30 hySlideTrigger">
                    <ul>
                        <li class="selected">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ul>
                </div>
            </div>
            <div class="hySlideTrigger"><span class="prev cp">上一页</span>&nbsp;<span class="next cp">下一页</span></div>
        <!-- demo end -->
        </div>
<h3>动画代码：</h3>
<pre>
$('#demo3').hy_slide({
    effect : 'scrollX',
    autoPlay : true,
    corotation : true,
    speed : 1000,
    timer : 3000,
    show : 3,
    step : 2,
    classTr : 'hySlideTrigger',
    classCon : 'hySlideContent',
    btnPrev : 'prev',
    btnNext : 'next',
    loop : true,
    slight : 6
});
</pre>
    <!-- 效果演示 end -->
    </div>

	<!-- 效果演示4 -->
    <script type="text/javascript">
	$(function(){
		$('#demo4').hy_slide({
			effect : 'scrollLoopX',  //动画执行效果，可以是：scrollY(默认), scrollX, fade, scrollLoopX, scrollLoopY
			autoPlay : true,  //自动执行，true(默认) 或 false
			corotation : true,  //正转或反转，由下到上、由右到到左为正转
			speed : 1000,  //动画速度，可以是：normal(默认), fast, slow 或 数值
			timer : 3000,  //执行间隔，默认1000毫秒
			show : 3,  //展现量，默认展示1个
			step : 2,  //执行步数，默认执行1步
			classTr : 'hySlideTrigger',  //触发器父级class
			classCon : 'hySlideContent',  //滚动器父级class
			btnPrev : 'prev',  //上一个按钮class
			btnNext : 'next',  //下一个按钮class
			loop : true,  //是否循环执行动画，默认true
			slight : 6 //项目微调，单位px
		});
	});
	</script>
	<div class="demoBox2 mt20">
    <!-- 效果演示 start -->
    	<h3>效果演示4 - 水平循环式滚动</h3>
        <div class="demo2 mt10" id="demo4">
        <!-- demo start -->
            <div class="mainBox pr z10">
                <div class="content">
                    <ul class="pr z20 hySlideContent">
                        <li><a href="#" title="" target="_blank"><img src="Images/1.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/2.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/3.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/4.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/5.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/6.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/7.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/8.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="trigger pa z30 hySlideTrigger">
                    <ul>
                        <li class="selected">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ul>
                </div>
            </div>
            <div class="hySlideTrigger"><span class="prev cp">上一页</span>&nbsp;<span class="next cp">下一页</span></div>
        <!-- demo end -->
        </div>
<h3>动画代码：</h3>
<pre>
$('#demo4').hy_slide({
    effect : 'scrollX',
    autoPlay : true,
    corotation : true,
    speed : 1000,
    timer : 3000,
    show : 3,
    step : 2,
    classTr : 'hySlideTrigger',
    classCon : 'hySlideContent',
    btnPrev : 'prev',
    btnNext : 'next',
    loop : true,
    slight : 6
});
</pre>
    <!-- 效果演示 end -->
    </div>

	<!-- 效果演示5 -->
    <script type="text/javascript">
	$(function(){
		$('#demo5').hy_slide({
			effect : 'fade',  //动画执行效果，可以是：scrollY(默认), scrollX, fade, scrollLoopX, scrollLoopY
			autoPlay : true,  //自动执行，true(默认) 或 false
			corotation : true,  //正转或反转，由下到上、由右到到左为正转
			speed : 1000,  //动画速度，可以是：normal(默认), fast, slow 或 数值
			timer : 3000,  //执行间隔，默认1000毫秒
			classTr : 'hySlideTrigger',  //触发器父级class
			classCon : 'hySlideContent',  //滚动器父级class
			btnPrev : 'prev',  //上一个按钮class
			btnNext : 'next',  //下一个按钮class
			loop : true,  //是否循环执行动画，默认true
			slight : 6 //项目微调，单位px
		});
	});
	</script>
	<div class="demoBox2 mt20">
    <!-- 效果演示 start -->
    	<h3>效果演示5 - 渐变式切换</h3>
        <div class="demo3 mt10" id="demo5">
        <!-- demo start -->
            <div class="mainBox pr z10">
                <div class="content">
                    <ul class="pr z20 hySlideContent">
                        <li class="z10"><a href="#" title="" target="_blank"><img src="Images/1.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/2.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/3.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/4.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/5.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/6.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/7.jpg" alt="" /></a></li>
                        <li><a href="#" title="" target="_blank"><img src="Images/8.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="trigger pa z30 hySlideTrigger">
                    <ul>
                        <li class="selected">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                    </ul>
                </div>
            </div>
            <div class="hySlideTrigger"><span class="prev cp">上一页</span>&nbsp;<span class="next cp">下一页</span></div>
        <!-- demo end -->
        </div>
<h3>动画代码：</h3>
<pre>
$('#demo5').hy_slide({
    effect : 'fade',
    autoPlay : true,
    corotation : true,
    speed : 1000,
    timer : 3000,
    classTr : 'hySlideTrigger',
    classCon : 'hySlideContent',
    btnPrev : 'prev',
    btnNext : 'next',
    loop : true,
    slight : 6
});
</pre>
    <!-- 效果演示 end -->
    </div>
</div>
</body>
</html>